<template>
  <div class="page">
    <div class="head" v-if="activeData">
      <!--<img src="../../assets/supply/dongtai.png">-->
      <div class="dt">
        <label class="title">当前阶段</label>
        <img class="photo" :src="$base.serverPath+personData.img">
        <div class="unit">
          <h4 v-if="activeData.stageName">{{activeData.stageName}}</h4>
          <div v-if="activeData.stateValue && activeData.stateValue.length>0">
            <label><span style="color: #70aa2f">农事操作：</span>{{activeData.stateValue[0].TypeName}}</label>
            <p><span style="color: #70aa2f">时间：</span>{{activeData.stateValue[0].dateTime}}</p>
            <p>进入下一生长周期<span style="color: #70aa2f">{{getDateDiff(activeData.endTime)}}天</span></p>
          </div>
          <div v-else>
            <label>暂无数据</label>
          </div>
        </div>
      </div>
      <div class="triangle"></div>
    </div>
    <!--<swiper class="main" :show-dots="false" v-model="swiper_index" :height="'40vh'" :loop="true">-->
    <div style="height: 40vh;position: relative">
      <div v-if="swiper_index ==0">
        <!--<div class="manager">
          <div class="managerPhoto">
            <img src="../../assets/supply/manager_photo.png">
          </div>
          <label v-if="activeData"><span class="key">管理员：</span>{{activeData.stateValue[0].person}}</label>
        </div>-->
        <div class="guoshu">
          <img style="height: 100%" src="../../assets/supply/guoshu.png">
        </div>
        <img class="jiaoshui" v-if="getShowType(1)" src="../../assets/supply/jiaoshui.png">
        <img class="jiaoshui" v-if="getShowType(4)" style="height:60px;top:120px;right: 300px" src="../../assets/supply/penhu.png">
        <img class="jiaoshui" v-if="getShowType(3)" style="height:80px;top:180px;right: 200px" src="../../assets/supply/tieqiao.png">
        <img class="jiaoshui" v-if="getShowType(2)" style="height:60px;top:110px;right: 80px" src="../../assets/supply/qianzi.png">
      </div>
      <div v-if="swiper_index ==1" style="text-align: center;">
        <!--<video width="80%"
               src="https://wsqncdn.miaopai.com/stream/D~sQJT~-dCN4TavLTsFNvt5Ja2bHz~Lj1I3Lzg___0_1520298338.mp4?ssig=5c13ce137cdfaaf1dfb3c2d4b53a3346&time_stamp=1520311165849"
               poster="../../assets/supply/yulan.png" controls="controls"></video>-->
        <!--<div style="padding: 0 30px;">
          <video-player  class="video-player vjs-custom-skin"
                         ref="videoPlayer"
                         :options="playerOptions"
                         :playsinline="true">
          </video-player>
        </div>-->
        <div style="padding-top: 30px">
          <swiper v-model="picIndex" :list="imgList" style="width:85%;margin:0 auto;" dots-position="center" @click.native="showPic()"></swiper>
        </div>
      </div>
      <div v-if="swiper_index ==2" :class="getClass(2)">
        <!--<div style="width: 100%;text-align: center">
          <img width="90%" src="../../assets/supply/huanjing.png">
        </div>-->
        <div class="hj">
          <img class="wifi" style="top: 45px;right: 85px" src="../../assets/supply/wifi.gif">
          <img class="wifi" style="top: 10px;right: 90px" src="../../assets/supply/wifi.gif">
          <img class="wifi" style="top: 50px;right: 150px" src="../../assets/supply/wifi.gif">
          <img class="wifi" style="top: 20px;right: 210px" src="../../assets/supply/wifi.gif">
          <img class="dp" src="../../assets/supply/dapeng.png">
          <div class="hj-item item1" style="top:4vh;left: 10px" v-if="currentSensorData">
            <img src="../../assets/supply/guangzhao.png">
            <label>{{currentSensorData[2]}}Lux<span>光照强度</span></label>
          </div>
          <div class="hj-item item2" style="top: 16vh;left: 20px;" v-if="currentSensorData">
            <img src="../../assets/supply/wenduji.png">
            <label>{{currentSensorData[0]}}℃<span>空气温度</span></label>
          </div>
          <div class="hj-item item3" style="top: 22vh;right: 20px;" v-if="currentSensorData">
            <img src="../../assets/supply/shidu.png">
            <label>{{currentSensorData[1]}}%<span>空气湿度</span></label>
          </div>
        </div>
      </div>
    <!--</swiper>-->
    </div>
    <div class="swiper-left" v-on:click="swiperGo(-1)">
      <x-icon type="ios-arrow-left" size="30"></x-icon>
    </div>
    <div class="swiper-right" v-on:click="swiperGo(1)">
      <x-icon type="ios-arrow-right" size="30"></x-icon>
    </div>
    <div class="foot">
      <flexbox style="text-align: center">
        <flexbox-item>
          <div v-on:click="footImgClick(0)">
            <img v-if="swiper_index == 0" src="../../assets/supply/sc_s.png">
            <img v-else src="../../assets/supply/sc.png">
          </div>
        </flexbox-item>
        <flexbox-item>
          <div v-on:click="footImgClick(1)">
            <img v-if="swiper_index == 1" src="../../assets/supply/sp_s.png">
            <img v-else src="../../assets/supply/sp.png">
          </div>
        </flexbox-item>
        <flexbox-item>
          <div v-on:click="footImgClick(2)">
            <img v-if="swiper_index == 2" src="../../assets/supply/hj_s.png">
            <img v-else src="../../assets/supply/hj.png">
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <div>
      <previewer :list="preImgList" ref="previewer"></previewer>
    </div>
  </div>
</template>

<script>
  import 'video.js/dist/video-js.css'
  import 'videojs-flash'
  import 'videojs-contrib-hls'
  import { videoPlayer } from 'vue-video-player'
  import { Flexbox, FlexboxItem, Swiper, SwiperItem, Previewer, TransferDom } from 'vux'
  import pic1 from '../../assets/supply/pic/1.jpg'
  import pic2 from '../../assets/supply/pic/2.jpg'
  import pic3 from '../../assets/supply/pic/3.jpg'
  import pic4 from '../../assets/supply/pic/4.jpg'
  import pic5 from '../../assets/supply/pic/5.jpg'

  export default {
    data () {
      return {
        swiper_index: 0,
        playerOptions: {
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: 'application/x-mpegURL',
            src: 'http://210.12.220.212:10800/hls/stream_2/stream_2_live.m3u8'
          }],
          width:'80%'
        },
        imgList:[
          {img:pic1},
          {img:pic2},
          {img:pic3},
          {img:pic4},
          {img:pic5},
          ],
        preImgList:[
          {src:pic1},
          {src:pic2},
          {src:pic3},
          {src:pic4},
          {src:pic5},
          ],
        activeData:null,//农事活动数据
        currentSensorData:null,//环境数据
        personData:null, //人员数据
        picIndex:0 //图片索引
      }
    },
    components: {
      Flexbox,
      FlexboxItem,
      Swiper,
      SwiperItem,
      videoPlayer,
      Previewer,
      TransferDom
    },
    created() {
      this.loadData();
      this.loadCurrentSensorData();

      var pDatas = this.$utils.getData("personData");
      for(var i in pDatas){
        if(pDatas[i].tid == this.$route.params.tid){
          this.personData = pDatas[i]
        }
      }

    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      getShowType(type){
        if(this.activeData){
          var typeName = this.activeData.stateValue[0].TypeName;
          if(type == 1){
            if(typeName.indexOf("浇水")>-1){
              return true;
            }
          }else if(type == 2){
            if(typeName.indexOf("疏花")>-1 || typeName.indexOf("疏果")>-1){
              return true;
            }
          }else if(type == 3){
            if(typeName.indexOf("翻地面")>-1 || typeName.indexOf("除草")>-1){
              return true;
            }
          }else if(type == 4){
            if(typeName.indexOf("打药")>-1){
              return true;
            }
          }
        }
        return false;
      },
      showPic(){
        this.$refs.previewer.show(this.picIndex)
      },
      loadData(){
        //获取透明供应信息
        this.$http.get("/transparent/getsupplyinfo?tid="+this.$route.params.tid).then(result=>{
          //获取农事活动信息
          this.$http.get("/production/getActiveByCommodityId?commodityId="+result.useDefPara.productionPlanId).then(result2=>{
            var nowDate = this.getNowFormatDate();
            for(var i in result2.useDefPara){
              if(result2.useDefPara[i].startTime<=nowDate && nowDate<=result2.useDefPara[i].endTime){
                this.activeData = result2.useDefPara[i];
                return
              }
            }
            this.activeData = {};
          })

        })
      },
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      getDateDiff(endDate)
      {
        var startTime = new Date().getTime();
        var endTime = new Date(Date.parse(endDate.replace(/-/g,   "/"))).getTime();
        var dates = Math.abs((startTime - endTime))/(1000*60*60*24);
        return   Math.ceil(dates);
      },
      loadCurrentSensorData(){
        this.$http.get("http://210.12.220.215:8080/datapublish/getCurrentSensorData.html?SN=SNS00001000").then(result=>{
          this.currentSensorData = result.datalist[0].valuelist[0].fieldvalue;
        })
      },
      footImgClick (index) {
        this.swiper_index = index
      },
      swiperGo (i) {
        this.swiper_index = this.swiper_index + i
        if(this.swiper_index<0)this.swiper_index = 2
        if(this.swiper_index>2)this.swiper_index = 0
      },
      getClass(index){
        if(index == this.swiper_index){
          return "hjA"
        }else{
          return "noshow"
        }
      }
    }
  }
</script>
<style scoped>


  .head {
    width: 100%;
    display: inline-block;
    margin: 5vh 0 0;
  }

  .head img {
    height: 30vh;
  }
  .main{
    position: relative;
  }

  .dt{
    top:0;
    position: relative;
    margin: 0 5%;
    background: url(../../assets/supply/dt.png);
    background-size: 100% 100%;
    padding: 70px 20px 30px 35px;
  }
  .dt .title{
    background: url(../../assets/supply/dt_title.png);
    background-size: 100% 100%;
    float: left;
    margin-top: -55px;
    margin-left: -25px;
    color: #fff;
    height: 45px;
    padding: 0 10px;
    line-height: 35px;
    font-weight: bold;
    font-size: 1.4rem;
  }
  .dt .photo{
    position: absolute;
    top: 15px;
    right: 25px;
    width: 80px;
    height: 80px;
    border-radius: 80px;
  }
  .dt .unit{
    display: inline-block;
    border-left: 1px solid #92c888;
    padding-left: 30px;
    box-sizing:border-box;
    width: 100%;
    color: #999;
    font-size: 1.4rem;
  }
  .dt .unit:before{
    content: "";
    width: 12px;
    height: 12px;
    border: 5px solid #92c888;
    border-radius: 50%;
    float: left;
    margin-left: -42px;
    margin-top: 15px;
    background-color: #fff;
  }
  .dt .unit h4{
    color: #70aa2f;
    font-size: 1.5rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    width: 50%;
    padding-bottom: 5px;
  }


  .manager{
    position: absolute;
    top: 30px;
    left: 30px;
    text-align: center;
    font-size: 1.4rem;
    text-align: center;
  }
  .manager .managerPhoto{
    border: 1px solid #70aa2f;
    padding: 5px;
    border-radius: 50%;
    height: 80px;
    width: 80px;
  }
  .manager .managerPhoto img{
    width: 80px;
    height: 80px;
  }
  .jiaoshui{
    position: absolute;
    top: 30px;
    right: 40px;
    height: 70px;
  }
  .guoshu{
    width: 100%;
    text-align: center;
    height: 40vh;
  }


  .hj{
    height: 100%;
    text-align: right;
    position: relative;
  }
  .hj .dp{
    width: 70%;
    margin-top: 60px;
  }
  .hj .hj-item{
    position: absolute;
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: 1px dashed #70aa2f;
    padding: 0 5px;
  }
  .hj .hj-item img{
    height: 50px;
    padding: 5px 5px 5px 0 ;
  }
  .hj .hj-item label{
    color: red;
    font-size: 1.4rem;
  }
  .hj .hj-item label span{
    display: block;
    color: #70aa2f;
  }
  .hj .wifi{
    width: 30px;
    position: absolute;
    z-index: 9;
  }

  .foot {
    margin: 0 15vw;
    height: 25vh;
    animation: opacityA 2s;
  }

  .foot img {
    width: 18vw;
  }


  /*动画*/
  .noshow{
    opacity: 0;
  }
  .dt {
    animation: dtA 2s;
  }
  .hjA .dp{
    animation: opacityA 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .hjA .item1{
    animation: opacityA 1s 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .hjA .item2{
    animation: opacityA 1s 2s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .hjA .item3{
    animation: opacityA 1s 3s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .foot {
    animation: opacityA 2s;
  }

  .guoshu{
    animation: opacityA 2s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .jiaoshui{
    animation: opacityA 1s 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .manager{
    animation: opacityA 1s 2s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  @keyframes opacityA {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes dtA {
    0% {
      top: -500px;
    }
  }

</style>
